import { Column } from '@/components/pro-panel/index.typing';
import { LayerTypeEnum, options } from './index';

export function useNormalColumns(formData: any, changeLayerType: Function) {
  const normalColumns = computed<Column[]>(() => {
    /** 基础设置 */
    const basicColumns: Column[] = [
      {
        type: 'select',
        prop: 'layerType',
        label: '图层类型',
        group: 'basic',
        options: LayerTypeEnum,
        formProps: {
          onChange: changeLayerType,
        },
      },
      {
        type: 'select',
        prop: 'heightKey',
        label: '离地高度',
        group: 'basic',
        options: [],
        span: 11,
        formProps: {
          placeholder: '无/按字段',
        },
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'basic',
        span: 2,
        formProps: {
          placeholder: '按字段值拔高',
        },
      },
      {
        type: 'input-number',
        prop: 'heightValue',
        label: ' ',
        group: 'basic',
        span: 11,
        formProps: {
          controls: false,
        },
      },
    ];

    /** 效果设置 tab  矢量 */
    const effectVectorColumns = [
      {
        type: 'select',
        prop: 'fillStyle',
        label: '样式',
        group: 'effect',
        options: [],
      },
      {
        type: 'color-picker',
        prop: 'fillColor',
        label: '填充',
        group: 'effect',
      },
      {
        type: 'select',
        prop: 'heightKey',
        label: '尺寸',
        group: 'effect',
        options: [],
        span: 11,
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'effect',
        span: 2,
      },
      {
        type: 'input-number',
        prop: 'size',
        label: ' ',
        group: 'effect',
        span: 11,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'input-number',
        prop: 'borderWidth',
        label: '边框',
        group: 'effect',
        span: 12,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'color-picker',
        prop: 'vectorColor',
        label: ' ',
        group: 'effect',
        span: 12,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'alphax',
        label: '透明度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'progress-input',
        prop: 'rotateSpeed',
        label: '旋转速度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '颜色叠加111',
        label: '',
        group: 'effect',
        options: [{ label: '颜色叠加', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '优先显示111',
        label: '',
        group: 'effect',
        options: [{ label: '优先显示', value: 1 }],
      },
      {
        type: 'select',
        prop: 'fontShow',
        label: '文字显示',
        group: 'effect',
        options: [],
      },
      {
        type: 'progress-input',
        prop: 'fontSize',
        label: '文字大小',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'color-picker',
        prop: 'fontColor111',
        label: '文字颜色',
        group: 'effect',
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.effectTab === '矢量',
    }));

    /** 效果设置 tab 图片 */
    const effectImgColumns = [
      {
        type: 'select',
        prop: 'fillStyle2',
        label: '样式',
        group: 'effect',
        options: [],
      },
      {
        type: 'select',
        prop: 'heightKey2',
        label: '尺寸',
        group: 'effect',
        options: [],
        span: 11,
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'effect',
        span: 2,
      },
      {
        type: 'input-number',
        prop: 'size2',
        label: ' ',
        group: 'effect',
        span: 11,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'alphay',
        label: '透明度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'progress-input',
        prop: 'modelRotation',
        label: '旋转速度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '颜色叠加111',
        label: '',
        group: 'effect',
        options: [{ label: '颜色叠加', value: 1 }],
        span: 10,
      },
      {
        type: 'color-picker',
        prop: 'baseWaterColor',
        label: '',
        group: 'effect',
        span: 14,
      },
      {
        type: 'checkbox',
        prop: '垂直发光222',
        label: '',
        group: 'effect',
        options: [{ label: '垂直发光', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '优先显示222',
        label: '',
        group: 'effect',
        options: [{ label: '优先显示', value: 1 }],
      },
      {
        type: 'select',
        prop: 'fontShow222',
        label: '文字显示',
        group: 'effect',
        options: [],
      },
      {
        type: 'progress-input',
        prop: 'fontSize222',
        label: '文字大小',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'color-picker',
        prop: 'fontColor222',
        label: '文字颜色',
        group: 'effect',
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.effectTab === '图片',
    }));

    /** 效果设置 tab 模型 */
    const effectModelColumns = [
      {
        type: 'select',
        prop: 'fillStyle333',
        label: '样式',
        group: 'effect',
        options: [],
      },
      {
        type: 'select',
        prop: 'heightKey333',
        label: '尺寸',
        group: 'effect',
        options: [],
        span: 11,
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'effect',
        span: 2,
      },
      {
        type: 'input-number',
        prop: 'size333',
        label: ' ',
        group: 'effect',
        span: 11,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'alpha333',
        label: '透明度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '颜色叠加333',
        label: '',
        group: 'effect',
        options: [{ label: '颜色叠加', value: 1 }],
        span: 10,
      },
      {
        type: 'color-picker',
        prop: 'baseWaterColor333',
        label: '',
        group: 'effect',
        span: 14,
      },
      {
        type: 'checkbox',
        prop: '垂直发光333',
        label: '',
        group: 'effect',
        options: [{ label: '垂直发光', value: 1 }],
      },
      {
        type: 'checkbox',
        prop: '优先显示333',
        label: '',
        group: 'effect',
        options: [{ label: '优先显示', value: 1 }],
      },
      {
        type: 'select',
        prop: 'fontShow333',
        label: '文字显示',
        group: 'effect',
        options: [],
      },
      {
        type: 'progress-input',
        prop: 'fontSize333',
        label: '文字大小',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'color-picker',
        prop: 'fontColor333',
        label: '文字颜色',
        group: 'effect',
      },
    ].map((item: any) => ({
      ...item,
      visible: formData.effectTab === '模型',
    }));

    return [
      /** 基础设置 */
      {
        type: 'input',
        prop: 'name',
        label: '名称',
        required: true,
        rules: [{ required: true, message: '名称不能为空' }],
      },
      ...basicColumns,
      /** 效果设置 tab */
      {
        type: 'tab',
        prop: 'effectTab',
        label: '',
        group: 'effect',
        formProps: {
          options: options,
          size: 'large',
        },
      },
      /** 效果设置 tab  矢量 */
      ...effectVectorColumns,
      /** 效果设置 tab 图片 */
      ...effectImgColumns,
      /** 效果设置 tab 模型 */
      ...effectModelColumns,
      /** 跟随缩放 */
      {
        type: 'text',
        prop: 'text',
        label: '显示距离',
        group: 'followZoom',
        span: 6,
      },
      {
        type: 'text',
        prop: 'text',
        label: '缩放范围（m）',
        group: 'followZoom',
        span: 9,
      },
      {
        type: 'text',
        prop: 'text',
        label: '缩放比例（%）',
        group: 'followZoom',
        span: 9,
      },
      {
        type: 'text',
        prop: 'minDisplayDistance',
        label: '最小距离',
        group: 'followZoom',
        span: 6,
      },
      {
        type: 'input-number',
        prop: 'minZoom',
        label: '',
        group: 'followZoom',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'input-number',
        prop: 'xxx',
        label: '',
        group: 'followZoom',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 100,
          step: 1,
        },
      },
      {
        type: 'text',
        prop: 'minDisplayDistance',
        label: '最大距离',
        group: 'followZoom',
        span: 6,
      },
      {
        type: 'input-number',
        prop: 'minZoom',
        label: '',
        group: 'followZoom',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'input-number',
        prop: 'xxx',
        label: '',
        group: 'followZoom',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 100,
          step: 1,
        },
      },
      /** 跟随透明 */
      {
        type: 'text',
        prop: 'text',
        label: '显示距离',
        group: 'followTransparent',
        span: 6,
      },
      {
        type: 'text',
        prop: 'text',
        label: '缩放范围（m）',
        group: 'followTransparent',
        span: 9,
      },
      {
        type: 'text',
        prop: 'text',
        label: '缩放比例（%）',
        group: 'followTransparent',
        span: 9,
      },
      {
        type: 'text',
        prop: 'minDisplayDistance',
        label: '最小距离',
        group: 'followTransparent',
        span: 6,
      },
      {
        type: 'input-number',
        prop: 'minZoom',
        label: '',
        group: 'followTransparent',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'input-number',
        prop: 'xxx',
        label: '',
        group: 'followTransparent',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 100,
          step: 1,
        },
      },
      {
        type: 'text',
        prop: 'minDisplayDistance',
        label: '最大距离',
        group: 'followTransparent',
        span: 6,
      },
      {
        type: 'input-number',
        prop: 'minZoom',
        label: '',
        group: 'followTransparent',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'input-number',
        prop: 'xxx',
        label: '',
        group: 'followTransparent',
        span: 9,
        formProps: {
          controls: false,
          min: 0,
          max: 100,
          step: 1,
        },
      },
    ];
  });

  return {
    normalColumns,
  };
}
